<script>
import TabContainer from './tab-container.vue'
export default {
    // 使用render function 函数写，后面很多东西是模板无法实现的
    name: 'Tabs',
    props: {
        value: {
            type: [String, Number],
            required: true
        }
    },
    components: {
        TabContainer
    },
    render () {
        // const contents = this.panes.map(pane => {
        //     return pane.active ? pane.$slots.default:null
        // })
        return (
            <div class="tabs">
                <ul class='tabs_header'>
                    {this.$slots.default}
                </ul>
                <tab-container panes={this.panes}></tab-container>
            </div>
        )
    },
    data () {
        return {
            panes: []  // mountde将自己加进去
        }
    },
    methods: {
        // 发生切换时，告诉外面，需要切换，当前切换的下标，那么要去拿
        // 当前切换的tab的下标,,几张，ul默认的外面的value，要在外面修改
        // 修改index确定激活的样式
        // 注意：传过来的值部门在内部值修改，在外面的值需要在外面修改
        onChange (index) {
            this.$emit('change', index)
        }
    },
}
</script>
<style lang="less" scoped>
    .tabs_header {
        display: flex;
        border-bottom: 2px solid #ededed;
    }
    .tab_content {
        padding: 20px;
    }
</style>

